let regionChildInfo = []
var map = new AMap.Map("map", {
  center: [113.07452, 36.025101],
  zoom: 12,
  pitch: 50,
  mapStyle: "amap://styles/dark",
  // mapStyle: "amap://styles/grey",
  // viewMode: "3D",
  features: ["bg", "road", "building", "point"],
});
var loca = new Loca.Container({
  map,
});

var geo = new Loca.GeoJSONSource({
  url: "js/common/wuxiang.geojson",
});

function addPolygon(coordinates, fillColor, strokeColor, strokeStyle) {
  let polygon = new AMap.Polygon({
    path: coordinates,
    fillColor: fillColor,  // 填充颜色
    fillOpacity: 0.3,      // 填充透明度（0~1）
    strokeOpacity: 1,      // 边框透明度
    strokeColor: strokeColor,// 边框颜色
    strokeWeight: 2,       // 边框宽度
    strokeStyle: strokeStyle, // 边框样式（虚线）
    strokeDasharray: [5, 5],// 虚线样式（5px 实线 + 5px 空白）
  });
  map.add(polygon);
}
dateType=''
type='zw'
$(function () {
  // $('.leftBox').addClass('animated animate__fadeInLeft');
  // 获取时间
  getTime();
  drawPolygon(shangdang);
  // 终端运行情况
  getTerminalRunningData();
  // 终端总数，累计时间数据
  getAllData();
  // 各乡镇终端数量统计
  getPerTownNumData();
  // 终端事件列表
  getTerminalList();
  // 应用使用情况
  getUseData(dateType);
  // 各乡镇应用使用情况按钮组切换
  $(".use-tab-group>div").click(function () {
    $(this).parents(".use-tab-group").find("div").removeClass("active");
    $(this).addClass("active");
    dateType = $(this).attr("data-type");
    getUseData(dateType);
    clearInterval(hotItemTimer);
    hotCaotainer.innerHTML = "";
    getHotItemListData(type,dateType);
  });
  // 长期离线终端统计
  getLongTimeTerminalData();

  // 各乡镇终端数量统计
 hotCaotainer = document.getElementById("hotCon");
  getHotItemListData(type);
  $(".perTownCount>div").click(function () {
    $(this).parents(".perTownCount").find("div").removeClass("active");
    $(this).addClass("active");
    type = $(this).attr("data-type");
    clearInterval(hotItemTimer);
    hotCaotainer.innerHTML = "";
    getHotItemListData(type,dateType);
  });
});

function drawPolygon(data) {
  let mapData = data;
  regionChildInfo.push(...mapData);
  mapData.forEach((item, index) => {
    if (item.coordinates && item.coordinates.length > 0) {
      addPolygon(item.coordinates, item.fillColor, "#7F9CF6", 'dashed')
    }
  })
}
// 获取时间
function getTime() {
  let time = document.getElementById("lastUpdateTime");
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  let timeStr =
    year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
  time.innerHTML = timeStr;
}
// 终端运行情况
function getTerminalRunningData() {
  let onlineTerminal = document.getElementById("onlineTerminal"); //在线终端
  let malfunctionTerminal = document.getElementById("malfunctionTerminal"); //故障终端
  let offlineTerminal = document.getElementById("offlineTerminal"); //离线终端
  $.ajax({
    url: url + "/api/v1/terminal/terminalOperation",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        $("#onlineTerminal").text(data.data.ZX);
        $("#malfunctionTerminal").text(data.data.GZ);
        $("#offlineTerminal").text(data.data.LX);
        const optionsData = [
          {
            name: "在线终端",
            value: data.data.ZX,
            itemStyle: {
              //   opacity: 0.5,
              color: "#1563FF",
            },
          },

          {
            name: "故障终端",
            value: data.data.GZ,
            itemStyle: {
              //   opacity: 0.5,
              color: "#E34D59",
            },
          },
          {
            name: "离线终端",
            value: data.data.LX,
            itemStyle: {
              //   opacity: 0.5,
              color: "#D0DEEE",
            },
          },
        ];
        setTerminalMap(optionsData);
      }
    },
  });
}
function setTerminalMap(data) {
  var terminalChart = echarts.init(document.getElementById("terminalRunning"));
  const series = getPie3D(data, 0.8, 240, 28, 26, 0.5);
  option = {
    legend: {
      show: false,
      tooltip: {
        show: false,
      },
      icon: "circle",
      data: ["在线终端", "故障终端", "离线终端"],
      bottom: "5%",
      formatter: (name) => {
        if (data.length) {
          const item = data.filter((item) => item.name === name)[0];
          return `${name}\n{value|${item.value}}台`;
        }
      },
      textStyle: {
        color: "#fff",
        rich: {
          value: {
            fontSize: 20,
            fontFamily: "TeX Gyre Adventor",
            fontWeight: "bold",
          },
        },
      },
    },
    animation: true,
    tooltip: {
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          return `${
            params.seriesName
          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
            params.color
          };"></span>${option.series[params.seriesIndex].pieData.value + "台"}`;
        }
      },
      textStyle: {},
    },
    title: {
      x: "center",
      top: "0",
      textStyle: {
        color: "#fff",
        fontSize: 22,
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 0.5,
      top: "-20%",
      // bottom: '50%',

      viewControl: {
        distance: 180,
        alpha: 25,
        beta: 60,
        zoomSensitivity: 0,
        autoRotate: false, // 自动旋转
      },
    },

    series: series,
  };

  terminalChart.setOption(option);
}
// 终端总数，累计时间数据
function getAllData() {
  let totalNum = document.getElementById("totalNum"); //终端总数
  let totalTimeNum = document.getElementById("totalTimeNum"); //终端累计在线
  $.ajax({
    url: url + "/api/v1/terminal/terminalOverviewNum",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(totalNum, data.data.ZDZS, 1);
        valueFlash(totalTimeNum, data.data.ZXSC.toFixed(2), 1);
      }
    },
  });
}
// 各乡镇终端数量统计
function getPerTownNumData() {
  // 显示加载蒙层
  $('#perTownNumCount .loading-mask').show();
  $.ajax({
    url: url + "/api/v1/terminal/terminalNumByRegion",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        setPerTownData(data.data);
      }
      // 隐藏加载蒙层
      $('#perTownNumCount .loading-mask').hide();
    },
    error: function() {
      // 隐藏加载蒙层
      $('#perTownNumCount .loading-mask').hide();
      // 可以添加错误提示
      console.error('数据加载失败');
    }
  });
}

const chartImgIconList = [
  "./images/index/paiming_1.png",
  "./images/index/paiming_2.png",
  "./images/index/paiming_3.png",
  "./images/index/paiming_4.png",
  "./images/index/paiming_5.png",
  "./images/index/paiming_6.png",
  "./images/index/paiming_7.png",
  "./images/index/paiming_8.png",
  "./images/index/paiming_9.png",
  "./images/index/paiming_10.png",
  "./images/index/paiming_11.png",
  "./images/index/paiming_12.png",
];
function setPerTownData(data) {
  var perTownNumChart = echarts.init(
    document.getElementById("perTownNumCount")
  );
  var option = {
    tooltip: {
      show: true,
      trigger: "item",
      padding: [8, 15],
      backgroundColor: "rgba(12, 51, 115,0.8)",
      borderColor: "rgba(3, 11, 44, 0.5)",
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "90",
      right: "16%",
      top: "0%",
      bottom: "0%",
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: "category",
        axisTick: {
          show: false,
        },
        inverse: true,
        data: data.map((item) => item.QHMC),
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          margin: 10,
          formatter: function (value, index) {
            return `{img${index}|}{value|${value}}`;
          },
          rich: {
            value: {
              width: 55,
            },
            img0: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[0],
              },
            },
            img1: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[1],
              },
            },
            img2: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[2],
              },
            },
            img3: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[3],
              },
            },
            img4: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[4],
              },
            },
            img5: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[5],
              },
            },
            img6: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[6],
              },
            },
            img7: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[7],
              },
            },
            img8: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[8],
              },
            },
            img9: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[9],
              },
            },
            img10: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[10],
              },
            },
            img11: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[11],
              },
            },
            img12: {
              width: 24,
              height: 16,
              backgroundColor: {
                image: chartImgIconList[12],
              },
            },
          },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontWeight: 700,
          },
          formatter: function (value) {
            return value;
          },
        },
        data: data.map((item) => item.ZDSL),
      },
    ],
    series: [
      {
        name: "终端数量",
        type: "bar",
        barWidth: 3, // 柱子宽度
        MaxSize: 0,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
        label: {
          show: false,
        },
        data: data.map((item, index) => {
          return {
            name: item.QHMC,
            value: item.ZDSL,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(0, 146, 255, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(0, 58, 255, 0)",
                  },
                ],
              },
            },
          };
        }),
      },
      {
        name: "外圆",
        type: "scatter",
        emphasis: {
          scale: false,
        },
        symbol: "circle",
        symbolSize: [5, 5],
        itemStyle: {
          color: "#FFF",
          shadowColor: "#0092FF",
          shadowBlur: 5,
          borderWidth: 1,
          opacity: 1,
          borderColor: "#0092FF",
        },
        z: 2,
        data: data,
        animationDelay: 500,
      },
    ],
  };
  perTownNumChart.setOption(option);
}
var termianlItem = document.getElementById("termianl_table_container"); // 终端事件列表滚动区域元素
var termianlItemCon = document.getElementById("termianl-con"); // 终端事件列表元素
var termianlItemSpeed = 50; // 终端事件滚动速度
termianlItemTimer = null;
var mapdata = {
  type: "FeatureCollection",
  features: [
    {
      name: "green",
      value: [],
    },
    {
      name: "red",
      value: [],
    },
    {
      name: "red",
      value: [],
    },
    {
      name: "red",
      value: [],
    },
  ],
};
// 终端事件列表
function getTerminalList() {
  var termianlCaotainer = document.getElementById("termianl-con");
  clearInterval(termianlItemTimer);
  $.ajax({
    url: url + "/api/v1/terminal/terminalBehaviorList",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        var str = "";
        // var a = [];
        // a.push(
        //   Number(data.data[0].terminalCoordinate.split(",")[0]),
        //   Number(data.data[0].terminalCoordinate.split(",")[1])
        // );
        data.data.forEach(function (item, index) {
          if (item.terminalStatus === "1") {
            mapdata.features[0].value.push({
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [
                  Number(item.terminalCoordinate.split(",")[0]),
                  Number(item.terminalCoordinate.split(",")[1]),
                ],
              },
              properties: { name: item.regionName },
            });
          } else if (item.terminalStatus === "0") {
            mapdata.features[2].value.push({
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [
                  Number(item.terminalCoordinate.split(",")[0]),
                  Number(item.terminalCoordinate.split(",")[1]),
                ],
              },
              properties: { name: item.regionName },
            });
          } else {
            mapdata.features[1].value.push({
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [
                  Number(item.terminalCoordinate.split(",")[0]),
                  Number(item.terminalCoordinate.split(",")[1]),
                ],
              },
              properties: { name: item.regionName },
            });
          }
          if (item.terminalStatus === "0") {
            str += "<tr class='white'>";
          } else if (item.terminalStatus === "1") {
            str += "<tr class='blue'>";
          } else {
            str += "<tr class='red'>";
          }

          if (index < 9) {
            str += '<td style="width: 10%;">0' + (index + 1) + "</td>";
          } else {
            str += '<td style="width: 10%;">' + (index + 1) + "</td>";
          }
          str += '<td style="width: 40%;">' + item.regionName + "</td>";
          if (item.terminalStatus === "1") {
            str +=
              '<td style="width: 30%;">' +
              item.startTime +
              "</td>" +
              '<td style="width: 20%;">' +
              '<span class="zhuangtai_circle"></span>上线' +
              "</td>";
          } else if (item.terminalStatus === "0") {
            str +=
              '<td style="width: 30%;">' +
              item.latestTime +
              "</td>" +
              '<td style="width: 20%;">' +
              '<span class="zhuangtai_circle"></span>下线' +
              "</td>";
          } else {
            str +=
              '<td style="width: 30%;">' +
              item.latestTime +
              "</td>" +
              '<td style="width: 20%;">' +
              '<span class="zhuangtai_circle"></span>故障' +
              "</td>";
          }

          str += "</tr>";
        });
        termianlCaotainer.innerHTML = str;
        termianlItemListRoll();

        for (var i = 0; i < markers.length; i++) {
          addMarkers(i);
        }
      }
    },
  });
}
var markers_0 = [];
var markers_1 = [];
var markers_2 = [];
var markers_3 = [];
var markers = [markers_0, markers_1, markers_2, markers_3];
// 取消坐标点
function removeMarkers(markers) {
  map.remove(markers);
}
// 添加坐标点
function addMarkers(index) {
  markers[index] = [];
  for (let i = 0; i < mapdata.features[index].value.length; i++) {
    const icon = new AMap.Icon({
      image: `./images/index/${mapdata.features[index].name}.png`,
      size: new AMap.Size(30, 35),
      imageSize: new AMap.Size(30, 35)
    });

    const position = mapdata.features[index].value[i].geometry.coordinates;
    const name = mapdata.features[index].value[i].properties.name;
    const state = mapdata.features[index].name;

    const content = `
      <p style="margin: 6px 0; color: #333">名称 : ${name ? name : '无'}</p>
      <p style="margin: 6px 0; color: #333">位置 : ${position ? position : '无'} </p>
      <p style="margin: 6px 0; color: #333">状态 : 
      <span style="color: ${state === 'green' ? '#52c41a' : '#f5222d'}">${state === 'green' ? "在线" : "离线"}</span>
      </p>`;

    const marker = new AMap.Marker({  // 使用 const 确保每次循环都是新的变量
      map: map,
      position: position,
      icon: icon,
      offset: new AMap.Pixel(-10, -20),
      zIndex: 10,
    });

    const infoWindow = new AMap.InfoWindow({  // 使用 const 确保每次循环都是新的变量
      content: content,
      offset: new AMap.Pixel(0, -30),
      autoMove: true,
    });

    marker.on("click", () => {  // 使用箭头函数，绑定当前作用域的 marker 和 infoWindow
      infoWindow.open(map, marker.getPosition());
    });
    map.add(marker);
  }
}

$(".map_tl input").click(function () {
  var index = $(this).attr("name");
  if ($(this).prop("checked") == false) {
    removeMarkers(markers[index]);
  } else {
    addMarkers(index);
  }
});

// 停止滚动
function termianlItemListRollStop() {
  if (termianlItem.scrollTop >= termianlItemCon.scrollHeight / 2) {
    termianlItem.scrollTop = 0;
    termianlItem.scrollTop =
      termianlItem.scrollTop - termianlItemCon.scrollHeight / 2;
  } else {
    termianlItem.scrollTop++;
  }
}
// 终端事件滚动事件
function termianlItemListRoll() {
  termianlItemCon.innerHTML += termianlItemCon.innerHTML; // 列表数据复制实现循环滚动
  termianlItem.scrollTop++;
  termianlItemTimer = setInterval(termianlItemListRollStop, termianlItemSpeed);
}
// 鼠标移入
termianlItem.onmouseover = function () {
  clearInterval(termianlItemTimer);
};
// 鼠标移除
termianlItem.onmouseout = function () {
  termianlItemTimer = setInterval(termianlItemListRollStop, termianlItemSpeed);
};
// 应用使用情况 queryType
function getUseData(type,dateType) {
  $.ajax({
    url: url + "/api/v1/terminal/terminalModuleUsage",
    type: "get",
    headers: headers,
    data: {queryType: type},
    success: function (data) {
      if (data.success) {
        var list = [];
        list.push({
          name: "秒批秒办",
          value: data.data.MPMB,
        });
        list.push({
          name: "证明服务",
          value: data.data.ZMFW,
        });
        list.push({
          name: "政务服务",
          value: data.data.ZWFW,
        });
        list.push({
          name: "公共服务",
          value: data.data.GGFW,
        });
        list.push({
          name: "便民服务",
          value: data.data.BMFW,
        });
        setUseChart(list);
        $("#use-mpmb").text(data.data.MPMB);
        $("#use-zmfu").text(data.data.ZMFW);
        $("#use-bmsf").text(data.data.BMFW);
        $("#use-ggsf").text(data.data.GGFW);
        $("#use-zwsf").text(data.data.ZWFW);
      }
    },
  });
}
function setUseChart(data) {
  var useMapChart = echarts.init(document.getElementById("useMapChart"));
  var option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
    },
    color: ["#66E1DF", "#D0DEEE", "#0092FF", "#34FFBF", "#1563FF"],
    series: [
      {
        name: "使用情况",
        type: "pie",
        radius: ["90%", "75%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderColor: "#1a202a",
          borderWidth: 5,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  useMapChart.setOption(option);
}
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(
  startRatio,
  endRatio,
  isSelected,
  isHovered,
  k,
  height
) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;

  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;

  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }

  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== "undefined" ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u, v) {
      if (u < startRadian) {
        return (
          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u, v) {
      if (u < startRadian) {
        return (
          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u);
      }
      return Math.sin(v) > 0 ? 1 * height : -1;
    },
  };
}

// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let k =
    typeof internalDiameterRatio !== "undefined"
      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
      : 1 / 3;

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;

    let seriesItem = {
      name:
        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
      type: "surface",
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: k,
      },
    };

    if (typeof pieData[i].itemStyle != "undefined") {
      let itemStyle = {};

      typeof pieData[i].itemStyle.color != "undefined"
        ? (itemStyle.color = pieData[i].itemStyle.color)
        : null;
      typeof pieData[i].itemStyle.opacity != "undefined"
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null;

      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      series[i].pieData.value
    );

    startValue = endValue;

    legendData.push(series[i].name);
  }

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: "mouseoutSeries",
    type: "surface",
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: "#E1E8EC",
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -0.5 : -5;
      },
    },
  });

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: "mouseoutSeries",
    type: "surface",
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: "#E1E8EC",
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -5 : -7;
      },
    },
  });
  series.push({
    name: "mouseoutSeries",
    type: "surface",
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: "#E1E8EC",
    },

    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -7 : -7;
      },
    },
  });
  return series;
}
// 长期离线终端统计
var longTimeTerminaBox = document.getElementById(
  "long-time-terminal_table_container"
);
var longTimeTerminaCon = document.getElementById("long-time-terminal-con");
var longTimeSpeed = 50;
var longTimeTimer;
function getLongTimeTerminalData() {
  let longTimeTerminalNum = document.getElementById("longTimeTerminalNum");
  $.ajax({
    url: url + "/api/v1/terminal/terminalOfflineList",
    type: "get",
    headers: headers,
    success: function (data) {
      if (data.success) {
        valueFlash(longTimeTerminalNum, data.data.length, 1);
        var str = "";
        if (data.data.length > 0) {
          data.data.forEach(function (item, index) {
            str += "<tr>";
            if (index < 9) {
              str +=
                '<td style="width: 10%;font-style: italic;">0' +
                (index + 1) +
                "</td>";
            } else {
              str +=
                '<td style="width: 10%;font-style: italic;">' +
                (index + 1) +
                "</td>";
            }
            str +=
              '<td style="width: 60%;padding-right: 10rem;">' +
              item.regionName +
              "</td>" +
              '<td style="width: 30%;color: #E34D59;">' +
              item.offlineDuration.toFixed(2) +
              "小时</td>" +
              "</tr>";
          });
        } else {
          str +=
            '<span style="display:inline-block;color: #d0deee;font-size:14rem;" class="mt20">暂无数据</span>';
        }
        longTimeTerminaCon.innerHTML = str;
        if (data.data.length > 3) {
          longTimeStart();
        }
      }
    },
  });
}

function longTimeStop() {
  if (longTimeTerminaBox.scrollTop >= longTimeTerminaCon.scrollHeight / 2) {
    longTimeTerminaBox.scrollTop = 0;
    longTimeTerminaBox.scrollTop =
      longTimeTerminaBox.scrollTop - longTimeTerminaCon.scrollHeight / 2;
  } else {
    longTimeTerminaBox.scrollTop++;
  }
}

function longTimeStart() {
  longTimeTerminaCon.innerHTML += longTimeTerminaCon.innerHTML;
  longTimeTerminaBox.scrollTop++;
  longTimeTimer = setInterval(longTimeStop, longTimeSpeed);
}
longTimeTerminaBox.onmouseover = function () {
  clearInterval(longTimeTimer);
};
longTimeTerminaBox.onmouseout = function () {
  longTimeTimer = setInterval(longTimeStop, longTimeSpeed);
};

// 各乡镇终端使用统计
var hotItem = document.getElementById("hot-con_table_container"); // 各乡镇终端使用滚动区域元素
var hotItemCon = document.getElementById("hotCon"); // 各乡镇终端使用元素
var hotItemSpeed = 70; // 各乡镇终端使用滚动速度
function getHotItemListData(type,dateType) {

  $.ajax({
    url: url + "/api/v1/terminal/terminalUsageByRegion",
    type: "get",
    data: { queryType: type,dateType:dateType },
    headers: headers,
    success: function (data) {
      if (data.success) {
        var str = "";
        data.data.forEach(function (item, index) {
          str += "<tr>";
          if (index < 9) {
            str +=
              '<td style="width: 20%;font-style: italic;">0' +
              (index + 1) +
              "</td>";
          } else {
            str +=
              '<td style="width: 20%;font-style: italic;">' +
              (index + 1) +
              "</td>";
          }
          str +=
            '<td style="text-align:center;width: 60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">' +
            item.QHMC +
            "</td>" +
            '<td style="width: 20%;text-align:left;">' +
            item.SYSL +
            "</td>" +
            "</tr>";
        });
        hotCaotainer.innerHTML = str;
        hotItemListRoll();
      }
    },
  });
}
// 停止滚动
function hotItemListRollStop() {
  if (hotItem.scrollTop >= hotItemCon.scrollHeight / 2) {
    hotItem.scrollTop = 0;
    hotItem.scrollTop = hotItem.scrollTop - hotItemCon.scrollHeight / 2;
  } else {
    hotItem.scrollTop++;
  }
}
// 各乡镇终端使用滚动事件
function hotItemListRoll() {
  hotItemCon.innerHTML += hotItemCon.innerHTML; // 列表数据复制实现循环滚动
  hotItem.scrollTop++;
  hotItemTimer = setInterval(hotItemListRollStop, hotItemSpeed);
}
// 鼠标移入
hotItem.onmouseover = function () {
  clearInterval(hotItemTimer);
};
// 鼠标移除
hotItem.onmouseout = function () {
  hotItemTimer = setInterval(hotItemListRollStop, hotItemSpeed);
};
